<template>
<!-- 客户列表 -->
  <div class="client">
      <c-table :columns="tableColumns" 
      :datas="tableData" 
      :loading="loading" 
      showPagination  
      :paginationDatas="paginationDatas"
       @onPageSizeChange="onPageSizeChange"
       @onShowNumChange="onShowNumChange"
       rowKey="companyId"
      >
        <template slot="creditList" slot-scope="row">
          <div v-if="row.tableRow&&row.tableRow.length!=0">
            <p  v-for="(item,index) in row.tableRow" :key="index"> 
              <a-tag color="blue">
             {{item.futuresContractCode}}
            </a-tag>
             <span class="colorMain">: {{item.availableCredit}}</span></p>
          </div>
          <p v-else>-</p>
        </template>
      </c-table>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { getCustomerPage, getProviderPage } from '@/api/company/companys'

export default {
  name: "Client",
  props: {
    propsPage: {
      type: String,
      default: 'provider'
    }
  },
  components: {},
  data() {
    return {
      tableColumns: [
        {
          title: "公司全称",
          dataIndex: "companyName",
          align: 'center'
        },
        {
          title: "联系人",
          dataIndex: "realName",
          align: 'center'
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          align: 'center'
        },
        {
          title: "采购额度",
          dataIndex: "creditList",
          scopedSlots: { customRender: "creditList" },
          align: 'center'
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: [ '10', '20', '30', '40', '50' ],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  created() {
    this.onPageOnlod()
  },
  mounted() {},
  methods: {
    onPageOnlod () {
      this.loading = true;
      let requetFun =this.propsPage=='client'?getCustomerPage:getProviderPage
      requetFun({
         "companyId": this.$route.query.companyId,
          "pageData": {
              "pageSize": this.paginationDatas.pageSize,
              "pageNum": this.paginationDatas.pageNum
          }
      })
      .then(res => {
        this.tableData = res.data.pageData
        this.paginationDatas.total = res.data.total
        this.loading = false
      })
      .finally(() => {
        this.loading = false
      })
    },
    onShowNumChange(val){
      this.paginationDatas.pageNum = val
      this.onPageOnlod()
    },
    onPageSizeChange(val){
      this.paginationDatas.pageSize = val
      this.onPageOnlod()
    }
  }
};
</script>

<style lang="less" scoped>
.client{
  p{
    margin: 0;
  }
  margin-top: 10px;
}
</style>
